<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col :span="12" class="logo">
        <img src="@/assets/logo.png" alt="">
        <p class="txt">{{sysName}}</p>
      </el-col>
      <el-col :span="12" class="user">
        <div class="userinfo-inner">
          <img class="img-user" :src="this.sysUserAvatar" /> 
          <span class="exit">退出</span>
        </div>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <aside :class="isCollapse?'menu-collapse':'menu-expanded'">
        <div class="menu" >
          <div class="menu-item" :class="item.ismine==ismine?'active':''"  v-for="(item,index) in $router.options.routes" :index="item" :key="index" v-if="!item.hidden" @click="showChildMenu(item,index)">
            <i :class="item.iconCls"></i>
            <p class="title">{{item.name}}</p>
          </div>
        </div>
        <div class="menu-child" v-if="isCollapse" >
          <div class="child-item" v-for="child in menuChild" :index="child.path" :key="child.path">
            <router-link :to="child.path" >
              <span class="child-title" :class="child.iconCls"> {{child.name}}</span>
            </router-link>
          </div>
        </div>
      </aside>
      <section class="content-container">
        <el-col :span="24" class="content-wrapper">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </section>
    </el-col>
  </el-row>
</template>

<script>
export default {
    data() {
      return {
        isCollapse: false,
        collapsed:false,
        sysName:'陕西省非税收缴管理系统',
        sysUserName: 'Judian',
        sysUserAvatar: 'http://wx2.sinaimg.cn/thumb150/005MhQeHgy1fox9denrc7j30j60ivwgq.jpg',
        menuChild:[],
        menuindex:'',
        ismine:'user' //选中路由的名字
      };
    },
    created(){
      if(localStorage.getItem('username')){
        this.sysUserName = localStorage.getItem('username')
      }

      let routes = this.$router.options.routes //暂存所有路由
      console.log(routes)
      console.log(this.$route.path)
      let routesok = [] //暂存有childen的路由
      for(let index in routes){
        if(!routes[index].hidden){
          if(routes[index].istwo){
            for(let key in routes[index].children){
              console.log('istwo:'+key)
              if(routes[index].children[key].path == this.$route.path){
                this.isCollapse = true
                this.menuChild = routes[index].children
                this.ismine = routes[index].children[key].ismine
                return
              }
            }
          }else{
            for(let key in routes[index].children){
              console.log(routes[index].children)
              console.log('!!!istwo:'+key)
              if(routes[index].children[key].path == this.$route.path){
                console.log('!!!istwo:==='+routes[index].children[key].path)
                this.isCollapse = false
                this.menuChild = []
                this.ismine = routes[index].children[key].ismine
                return
              }
            }
          }
        }
      }
     
      
    }, 
    methods: {
      showChildMenu(item,index){
        this.$router.replace(item.children[0])
        this.menuindex = index
        this.ismine = item.ismine
        let child = item.children
        if(child.length>1){
          this.isCollapse = true
          this.menuChild = child
        }else if(child.length = 1){
          this.isCollapse = false
          this.menuChild = []
          this.$router.replace(child[0].path)
        }else{
          this.isCollapse = false
          this.menuChild = []
        }
        
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      exit(){
        localStorage.removeItem('userlogin')
        localStorage.removeItem('username')
        this.$router.push({ path: '/login' })
        location.reload()
      },
      //折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			}
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .container
    position: absolute
    top: 0px
    bottom: 0px
    width: 100%
    .header
      height: 70px;
      line-height: 70px;
      background: #fff;
      border-bottom 1px solid #e4e4e4
      .user 
        text-align: right;
        padding-right: 35px;
        float: right;
        .userinfo-inner 
          cursor: pointer;
          color:#4d4d4d;
          text-align right
          .img-user 
            width: 40px;
            height: 40px;
            border-radius: 20px;
            margin: 15px 0;
          .exit
            margin 0 0 0 20px
            font-size 16px
            line-height 70px
            float right
      .logo 
        height:70px;
        font-size: 22px;
        padding-left:20px;
        padding-right:20px;
        img
          width: 40px;
          float: left;
          margin-top 15px
          margin-right 10px
          border-radius 50%
        .txt
          color:#333
          font-size 20px
          line-height 70px
      .tools
        padding: 0px 23px;
        width:14px;
        height: 60px;
        line-height: 60px;
        cursor: pointer;
    .main
      display: flex;
      position: absolute;
      top: 70px;
      bottom: 0px;
      overflow: hidden;
      aside
        flex: 0 0 94px;
        width: 94px;
        text-align center
        display flex
        .menu
          width 94px
          background-color #44a7fe
          height 100%
          padding 50px 0
          .menu-item
            margin-bottom 35px
            .iconfont
              color rgba(255,255,255,0.6)
            .title
              color rgba(255,255,255,0.6)
              margin-top 8px
              font-size 14px
          .menu-item.active
            .title
              color #fff
            .iconfont
              color #fff
        .menu-child
          background-color #ffffff
          width 200px 
          padding 50px 0
          .child-item
            height 40px
            line-height 40px
            .child-title
              color #333
              font-size 14px 
              width 200px
      aside.menu-collapse
        width 294px
        flex 0 0 294px
      aside.menu-expanded
        width 94px
        flex 0 0 94px
      .content-container
        flex:1;
        overflow-y: scroll;
        position relative
        background-color #eff3f5
        .content-wrapper 
          box-sizing: border-box;
          padding: 20px;
        .footer
          position absolute
          left 0
          bottom 0
          width 100%
          text-align center
          padding 5px
          color #999
    .router-link-active
      background-color #eff3f5
      padding 12px 63px
</style>


